<template>
  <div :style="{ background: 'var(--color-fill-2)', padding: '18px' }">
    <a-page-header
      :class="eyeProtectionMode ? 'eye-protection-color' : 'default-color'"
      @back="goRecommend"
    >
      <template #subtitle>
        <a-space>
          <span>{{ articleData?.userVO.userName }}</span>
          <a-tag color="gold" size="small">作者</a-tag>
        </a-space>
      </template>
      <template #extra>
        <a-space>
          <a-button
            type="primary"
            status="success"
            @click="enableEyeProtection"
          >
            {{ eyeProtectionMode ? "关闭" : "开启" }}护眼模式
          </a-button>
          <a-button type="primary" @click="handleSendGifts">打赏</a-button>
        </a-space>
      </template>
      <a-scrollbar style="height: 55vh; overflow: auto">
        <h1>{{ articleData?.title }}</h1>
        <p>
          <MdViewer :value="articleData?.content" />
        </p>
      </a-scrollbar>
    </a-page-header>
    <!--打赏模态框-->
    <a-modal
      v-model:visible="sendGiftsModelVisible"
      :unmount-on-close="true"
      simple
      hide-cancel
    >
      <template #title> 感谢您的支持！</template>
      <div style="display: flex; justify-content: space-between">
        <a-image
          width="180"
          src="http://qiniu.h1234.top/hoj/2023/12/15/wx.jpg"
        />
        <a-image
          width="180"
          src="http://qiniu.h1234.top/hoj/2023/12/15/zfb.jpg"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArticleControllerService } from "../../../generated";
import { Message } from "@arco-design/web-vue";
import MdViewer from "@/components/MdViewer.vue";

const router = useRouter();
const route = useRoute();

// 数据
const articleData = ref();

// 加载数据
const loadData = async () => {
  const res = await ArticleControllerService.getArticleByIdUsingGet(
    route.params.articleId as any
  );
  if (res.code === 0) {
    articleData.value = res.data;
  } else {
    Message.error("获取文章详情失败");
  }
};

onMounted(() => {
  loadData();
});

// 护眼模式状态
const eyeProtectionMode = ref(false);

/**
 * 护眼模式
 */
const enableEyeProtection = () => {
  eyeProtectionMode.value = !eyeProtectionMode.value;
};

/**
 * 返回
 */
const goRecommend = () => {
  router.push("/");
};

// 打赏模态框显隐状态
const sendGiftsModelVisible = ref(false);

/**
 * 打赏
 */
const handleSendGifts = () => {
  sendGiftsModelVisible.value = true;
};
</script>

<style scoped>
/*护眼色*/
.eye-protection-color {
  background: RGB(208, 219, 206);
}

/*默认白色*/
.default-color {
  background: var(--color-bg-2);
}
</style>